<template>
    <van-field
    :class="{'active':focusIdx==config.key,'error':isError==true,'correct':isCorrect==true}"
    v-model="config.value"
    :label="config.label"
    :required="config.must"
    :readonly="config.readonly"
    :disabled="config.disabled"
    :placeholder="config.placeholder"
    :maxlength="config.maxlength"
    @focus="onFocus"
    @blur="onBlur"
    ></van-field>
</template>

<script>
export default {
    data() {
        return {
           focusIdx: null,
           isError: false,
           isCorrect: false
        };
    },
    props: ['config'],
    created() {
        if (this.config.value) {
            this.$store.commit('SET_PHONE', this.config.value);
        }
    },
    methods: {
        onFocus() {
            this.focusIdx = this.config.key;
        },
        onBlur() {
            this.focusIdx = null;
            this.isCorrect = false;
            if (this.trims(this.config.value) != '') {
                if (/^1[345678]\d{9}$/.test(this.config.value)) {
                    this.isError = false;
                } else {
                    this.isError = true;
                }
            } else {
                this.isError = true;
            }
        }
    },
    watch: {
        'config.value': function(val, oldVal) {
            if (this.trims(val) != '') {
                this.$store.commit('SET_PHONE', val);
                if (/^1[345678]\d{9}$/.test(val)) {
                    this.isError = false;
                    this.isCorrect = true;
                } else {
                    this.isCorrect = false;
                }
            }
        }
    }
  };
</script>

<style>
</style>
